<template>
  <div class="sop-table-wrap">
    <div class="card-head">
      <div class="search-rows">
        <el-button type="primary" size="small" @click="onNavigationTo('/market/sop/add')" v-hasPermi="['sop:add']">
          <i class="el-icon-plus"></i>
          标准SOP
        </el-button>
        <el-select v-model="queryParams.taskstatus" placeholder="任务状态" size="small">
          <el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="queryParams.times" type="daterange" range-separator="至" start-placeholder="创建开始日期"
          end-placeholder="创建结束日期" size="small" style="width: 300px;">
        </el-date-picker>
        <el-input v-model="queryParams.name" class="search-input" size="small" placeholder="模版名称">
          <el-button slot="append" size="small" icon="el-icon-search"></el-button>
        </el-input>
        <el-select v-model="queryParams.status" placeholder="状态" size="small">
          <el-option v-for="item in accountList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
        <div slot="content">手动选择发送对象（客户、客户群）<br />并调用标准模板创建的SOP计划任<br />务，即选定的对象同时生成该SOP计<br />划任务，并按每天设定的时间进行发<br />送。
        </div>
        <span class="tolltip-text">标准SOP是什么？</span>
      </el-tooltip>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="120">
      </el-table-column>
      <el-table-column prop="name" label="模版">
      </el-table-column>
      <el-table-column prop="time" label="创建时间">
      </el-table-column>
      <el-table-column prop="createName" label="创建人">
      </el-table-column>
      <el-table-column prop="time" label="执行时间">
      </el-table-column>
      <el-table-column prop="date" label="生效企微号">
        <template slot-scope="scope">
          <span>{{scope.row.number||0}}个</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1" class="c_52c41a"><span class="statusdot bg_52c41a"></span> 下发完成	</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="handleModel(scope.row)" type="text" size="small" v-hasPermi="['sop:view']">模板详情</el-button>
          <el-button @click="handleTask(scope.row)" type="text" size="small" v-hasPermi="['sop:taskView']">任务详情</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small" v-hasPermi="['sop:cancel']">取消</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small" v-hasPermi="['sop:open']">开启</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <TableEmpty />
      </template>
    </el-table>
    <taskDetail :visable.sync='showTask' :row='rowitem' />
  </div>
</template>
<script>
import taskDetail from '../create/taskDetail.vue'
export default {
  data() {
    return {
      taskList: [
        { value: '1', label: '创建中' },
        { value: '2', label: '下发中' },
        { value: '3', label: '下发完成' },
        { value: '6', label: '已取消' }
      ],
      accountList: [
        { value: '', label: '全部' },
        { value: '1', label: '员工1' },
        { value: '2', label: '员工2' },
        { value: '3', label: '员工3' }
      ],
      queryParams:{
        taskstatus:'',
        name:"",
        status:'',
        times:''
      },
      tableData: [
        {id:'1043909',name:'我的模板',time:"2024-05-0714:49", createName:'主账号',status:1,}
      ],
      rowitem:null,
      showTask:false
    }
  },
  components:{
    taskDetail
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },

    handleModel(row){
      this.$router.push({name:"Detailsop",query:{id:row.id}})
    },

    handleTask(row){
      this.rowitem = row
      this.showTask = true
    },

    handleDelete(row){
      this.$msgBox
        .showMsgBox({
          title: "确定取消SOP任务？",
          cancelBtnText:'算 了',
          confirmBtnText:'取消任务',
          content:
            "还未下发的终止下发；已下发至各个企微号的计划任务，未完成的全部取消发送，已发送的不处理。请谨慎操作。",
        })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        })
        .catch(() => {});
    }

  },
}
</script>
<style lang="scss" scoped>
.sop-table-wrap {
  background: #fff;
  width: 100%;

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;

    .search-rows {
      display: grid;
      column-gap: 8px;
      grid-template-columns: 112px 180px 300px 180px 140px;
    }

    .tolltip-text {
      color: #3070ff;
      font-size: 14px;
      line-height: 22px;
    }
  }
}
.statusdot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
</style>
